<template>
  <view class="content">
    <view class="headerImg">
      <image src="../../static/image/delivery/deliveryBg.png" mode="scaleToFill" />
      <view class="headerBox" :style="'top:' + statusBarHeight + 'px;'">
        <!-- <u-navbar :is-back="false" :background="none"></u-navbar> -->
        <view class="headerInput">
          <view @click="chooseAddr" style="width: 50px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">
            <text class="address">{{ address }}</text>
            <image style="height:24rpx; width:12rpx; margin-left:8rpx;vertical-align: middle;"
              src="../../static/image/delivery/arrowhead1.png" alt="" />
          </view>
          <view class="searchBox" @tap="goDeliverySearch">
            <u-search :disabled="true" style="flex: 1;" placeholder="请输入内容" :show-action="false" :height="66"
              class="searchInput" input-align="left"></u-search>
            <button type="button" class="search">搜索</button>
          </view>
        </view>
      </view>
    </view>
    <!-- <view class="tabs">
			<view class="tabsLeft">
				推荐
			</view>
			<view class="tabsRight">
				   <view :class="[index===active ? 'active' :'']" v-for="(item,index) in arr" :key="index" @tap="selectAction(index)">
					    {{ item.merchantSmallName }}
				   </view>
			</view>
		</view> -->
    <view class="agrilist">
      <view v-for="(item, index) in list" :key="index"
        style="border-radius: 8rpx; margin-top:18rpx;background-color:white; padding:18rpx 24rpx;"
        @tap="goDetail(item)">
        <view style="display: flex;">
          <view style="width: 156rpx; height: 156rpx;position:relative;">
            <image :src="item.merchantHead" mode="scaleToFill"
              style="width:156rpx ; height:156rpx; border-radius:12rpx;" />
            <view v-if="item.businessStatus == 1 || item.isInOpenTime == 0"
              style="width:100%; height:30%;position:absolute;bottom:0;left:0;text-align:center;color:white;background-color:rgba(0,0,0,0.4);">
              已打烊
            </view>
          </view>
          <view class="agright">
            <view style="font-family: PingFang SC, PingFang SC;font-weight: bold;font-size: 32rpx;color: #000000;">
              {{ item.merchantName }}</view>
            <view style="display: flex; margin-top:18rpx;align-items:center;">
              <image src="../../static/image/pagesDelivery/Star.png" v-show="indexStar < item.merchantScore"
                v-for="(itemStar, indexStar) in Math.floor(item.merchantScore)" :key="indexStar" mode="scaleToFill" />
              <image src="../../static/image/pagesDelivery/halfwayStar.png" v-show="item.merchantScore % 1 !== 0"
                mode="scaleToFill" />
              <text
                style="font-family: PingFang SC, PingFang SC;font-weight: 400;font-size: 26rpx;color: #999999;margin-left:12rpx;">总销{{
                  item.merchantSalesVolume }}</text>
            </view>
          </view>
        </view>
        <view class="agbottom">
          <view v-for="(itemGoods, indexGoods) in item.appProducts" :key="indexGoods" class="itemGoods">
            <view class="itemGoodsimg"> <image :src="itemGoods.productImg" style="width: 100%; min-height: 156rpx;" mode="widthFix" /></view>
            <view class="goodsname">
              {{ itemGoods.productName }}
            </view>
            <view class="goodsPrice">
              ￥
              <text>{{ (itemGoods.productPrice / 100).toFixed(2) }}</text>

            </view>
          </view>
        </view>
      </view>
    </view>



  </view>
</template>

<script>
let that = null
import { selectLabelList, selectMerchantList } from '@/api/common'
export default {
  data() {
    return {
      statusBarHeight: 0, // 系统导航栏
      arr: [
        // '米面粮油','水果蔬菜','肉蛋奶','种子化肥','特种养殖','特种养殖'
      ],
      active: 0,
      loadStatus: 'loadmore',
      list: [],
      stausOne: 0,
      fValue: [],
      address: "",
      pageNum: 1,
      pageSize: 20,
      pagesStatus: false,
      typeid: 1,
      latAndLong: {},
      consigneeLng: '',
      consigneeLat: ''
    }
  },
  onReady() {

  },
  onLoad() {
    that = this
    that.latAndLong = uni.getStorageSync('latAndLong')
    console.log('当前经纬度', that.latAndLong)
    this.consigneeLng = that.latAndLong.longitude
    this.consigneeLat = that.latAndLong.latitude
    this.statusBarHeight = uni.getStorageSync('statusBarHeight')
    let nowAddress = uni.getStorageSync('address')
    console.log('当前地址', nowAddress)
    this.address = nowAddress.district
    console.log('导航栏高度:', this.statusBarHeight)

    // this.addRandomData();
    // 刚进页面监听
  },
  onShow() {
    this.gettabslist()
    let nowAddress = uni.getStorageSync('address')
    console.log('当前地址onshow', nowAddress)
    that.address = nowAddress.district
    that.latAndLong = uni.getStorageSync('latAndLong')
    console.log('当前经纬度', that.latAndLong)
    that.consigneeLng = that.latAndLong.longitude
    that.consigneeLat = that.latAndLong.latitude
    this.pageNum = 1
    this.pagesStatus = false
  },
  methods: {
    gitWaterfall() {
      let obj = {
        merchantTakeout: 3,
        lng: this.consigneeLng,
        lat: this.consigneeLat,
        pageNum: this.pageNum,
        pageSize: this.pageSize,

      }
      selectMerchantList(obj).then(res => {
        console.log('购物商城列表', res)
        if (this.pageNum === 1) {
          this.list = res.data
        } else {
          this.list = this.list.concat(res.data)
        }
        if (res.data.length < 20) {
          this.pagesStatus = false
        } else {
          this.pagesStatus = true
        }
      })
    },
    gettabslist() {

      let obj = {
        merchantTakeout: 3
      }
      selectLabelList(obj).then(res => {
        
        this.arr = res.data
        this.gitWaterfall()
      })
    },
    goDeliverySearch() {
      uni.navigateTo({
        url: '/pagesDelivery/deliverySearch?latAndLong=' + JSON.stringify(that.latAndLong) + '&merchantTakeout=3'
      })
    },
    // 去商品详情
    goDetail(item) {
      uni.navigateTo({
        url: `/pagesAgriculture/agricultureDetail?id=${item.merchantId}`
      })
    },
    selectAction(index) {
      this.active = index
      this.typeid = index + 1
      console.log('看看现在的数据', this.typeid)
      this.pageNum = 1
      this.list = []
      this.leftList = []
      this.rightList = []

      console.log('看看list数据内容', this.list)
      this.gitWaterfall()

    },

    chooseAddr() {
      // 获取地理位置
      //  uni.getLocation({
      //   type: 'gcj02',
      //   success: function (res) {
      //     let obj = {
      //       latitude: res.latitude,
      //       longitude: res.longitude,
      //     }
      //     uni.setStorageSync('latAndLong', obj)
      //     that.consigneeLng = res.longitude
      //     that.consigneeLat = res.latitude
      //     console.log('获取地理位置', res)
      //     let myAmapFun = new that.$AMapWX.AMapWX({
      //       key: '95ab2290fe58960a5208209750620518'
      //     });
      //     if (uni.getStorageSync('platform') == 'android') {
			// 			uni.setStorageSync('address', res.address)
      //       that.address = res.address.district
			// 			that.attachments();
			// 		} else if (uni.getStorageSync('platform') == 'ios') {
      //       myAmapFun.getRegeo({
			// 				location: `${res.longitude},${res.latitude}`,
			// 				success: function (data){
			// 					console.log('data',data)
      //           let addressComponent = data[0].regeocodeData.addressComponent
      //           that.address = addressComponent.district
      //           let addressObj = {
      //             country: addressComponent.country,
      //             province: addressComponent.province,
      //             city: (Array.isArray(addressComponent.city) && addressComponent.city.length === 0) ? addressComponent.province : addressComponent.city,
      //             district: addressComponent.district,
      //             street: addressComponent.streetNumber.street,
      //             streetNum: addressComponent.streetNumber.number,
      //             poiName: addressComponent.township,
      //             citycode: addressComponent.citycode,
      //           }
      //           uni.setStorageSync('address', addressObj)
      //           uni.$once("nextStep", function (e) {
      //             console.log('看看信息', e)
      //             that.consigneeLng = e[0].consigneeLng
      //             console.log('看看经度', that.consigneeLng)
      //             that.consigneeLat = e[0].consigneeLat
      //             console.log('看看维度', that.consigneeLat)
      //             that.address = e[0].consigneeAddress
      //             console.log('看看地址', that.address)
      //             let obj = uni.getStorageSync('address')
      //             let onjand = uni.getStorageSync('latAndLong')
      //             onjand.longitude = that.consigneeLng
      //             onjand.latitude = that.consigneeLat
      //             obj.district = that.address
      //             uni.setStorageSync('address', obj)
      //             uni.setStorageSync('latAndLong', onjand)
      //             that.pageNum = 1
      //             that.pagesStatus = false
      //             that.gitWaterfall()
      //           });
      //           uni.navigateTo({
      //             url: '/pagesMine/mineAddress'
      //           })
			// 				}
			// 			})
			// 		}
      //   },
      //   fail: function (info) {
          uni.$once("nextStep", function (e) {
            console.log('看看信息', e)
            that.consigneeLng = e[0].consigneeLng
            console.log('看看经度', that.consigneeLng)
            that.consigneeLat = e[0].consigneeLat
            console.log('看看维度', that.consigneeLat)
            that.address = e[0].consigneeAddress
            console.log('看看地址', that.address)
            let obj = uni.getStorageSync('address')
            let onjand = uni.getStorageSync('latAndLong')
            onjand.longitude = that.consigneeLng
            onjand.latitude = that.consigneeLat
            obj.district = that.address
            uni.setStorageSync('address', obj)
            uni.setStorageSync('latAndLong', onjand)
            that.pageNum = 1
            that.pagesStatus = false
            that.gitWaterfall()
          });
          uni.navigateTo({
            url: '/pagesMine/mineAddress'
          })
    //     }
    //   });
    },
  },
  onReachBottom() {
    console.log("触底");
    // 模拟的请求数据
    if (this.pagesStatus) {
      this.pageNum++
      this.gitWaterfall()
    }
  },

}
</script>

<style scoped lang="scss">
.content {
  min-height: 100vh;
  background-color: #F5F5F5;

  ::v-deep .u-navbar::after {
    display: none !important;
  }

  .headerImg {
    width: 100vw;
    height: 562rpx;
    border-radius: 0rpx 0rpx 0rpx 0rpx;
    display: flex;
    position: relative;

    image {
      width: 100%;
      height: 100%;
      border-radius: 0rpx 0rpx 0rpx 0rpx;
    }

    .headerBox {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      padding: 0 32rpx;
    }

    .headerInput {
      display: flex;
      align-items: center;
      justify-content: center;
      ;

      .searchBox {
        flex: 1;
        margin-left: 24rpx;
        background: white;
        display: flex;
        align-items: center;
        border-radius: 84rpx;
      }

      ::v-deep .searchInput .u-content {
        background-color: white !important;
        padding-right: 0 !important;
      }

      ::v-deep .searchInput .u-input {
        background-color: white !important;
      }

      .address {
        font-family: PingFang SC, PingFang SC;
        font-size: 28rpx;
        font-style: normal;
        font-weight: 400;
      }

      .search {
        width: 120rpx;
        height: 56rpx;
        border: none;
        outline: none;
        text-align: center;
        line-height: 56rpx;
        font-size: 28rpx;
        background-color: #D12C25;
        color: white;
        border-radius: 28rpx;
        margin: 0 8rpx;
      }
    }
  }

  .tabs {
    display: flex;
    padding: 36rpx 0 24rpx 32rpx;
    align-items: center;

    .tabsLeft {
      color: #D12C25;
      font-weight: Bold;
      font-size: 32rpx;
      font-family: PingFang SC-Bold;
    }

    .tabsRight {
      display: flex;
      overflow-x: scroll;
      flex: 1;
      margin-left: 8rpx;

      view {
        color: #999999;
        width: 110rpx;
        text-align: center;
        height: 40rpx;
        line-height: 40rpx;
        flex-shrink: 0;
        margin-right: 8rpx;
      }

      .active {
        color: #000;
        font-weight: bold;
      }
    }
  }

  .agrilist {
    margin: 18rpx 32rpx;


    .agright {
      flex: 1;
      margin-left: 24rpx;

      image {
        width: 24rpx;
        height: 22rpx;
      }
    }

    .agbottom {
      display: flex;
      overflow-x: auto;
      margin-top: 24rpx;

      .itemGoods {
        width: 156rpx;
        margin-right: 20rpx;
        flex-shrink: 0;
      }

      .itemGoodsimg {
        width: 156rpx;
        height: 156rpx;
        border-radius: 12rpx;
        overflow: hidden;
      }
      image {
        width: 156rpx;
        height: 156rpx;
        border-radius: 12rpx;
      }

      .goodsPrice {
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 26rpx;
        color: #D12C25;
      }
	  .goodsname {                                                                       
	      width: 156rpx;  
	      height: 80rpx;  
        word-break: break-all; //纯英文、数字、中文
		    display: -webkit-box;  
		    -webkit-box-orient: vertical;  
		    -webkit-line-clamp: 2; /* 限制显示的行数为2 */ 
		     line-height: 40rpx;
	      overflow: hidden;  
	      text-overflow: ellipsis;  
	  }
    }
    .agbottom::-webkit-scrollbar {
      display: none;
    }
  }
}
</style>
